// 表情面板
import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Dimensions } from 'react-native';
import { adapt, adaptFontSize, getBottomSafeHeight } from '../../ulits/Adapt';

// 屏幕宽度，用于布局
const screenWidth = Dimensions.get('window').width;
const EMOJI_NUM_PER_ROW = 8;
const EMOJI_SIZE = Math.floor((screenWidth - adapt(24)) / EMOJI_NUM_PER_ROW);

// 将表情分组用于面板显示
function groupEmojis(data: string[], numPerRow: number) {
  const res = [];
  for (let i = 0; i < data.length; i += numPerRow) {
    res.push(data.slice(i, i + numPerRow));
  }
  return res;
}

interface EmojiPanelProps {
  recentEmojis: string[];
  onEmojiPress: (emoji: string) => void;
  onClose: () => void;
}

// 所有表情列表
const emojiList = [
  "😀", "😏", "😊", "💔", "😭", "😒", "👍", "😳", "😅", "😎",
  "🥰", "😠", "😴", "😢", "😓", "😡", "😋", "😂", "😘",
  "🤔", "😮", "😑", "😞", "😆", "😯", "😐", "😃",
  "😅", "🤐", "😲", "👻", "🥵", "🥶", "🥳", "🤩",
  "😍", "🙏", "👋", "🎉", "🔥",
];

// 表情面板组件
const EmojiPanel: React.FC<EmojiPanelProps> = ({ recentEmojis, onEmojiPress, onClose }) => {
  const emojiRows = groupEmojis(emojiList, EMOJI_NUM_PER_ROW);

  return (
    <View style={styles.emojiPanel}>
      {/* 最近使用 */}
      <Text style={styles.emojiCategory}>最近使用</Text>
      <View style={styles.emojiRowJustify}>
        {recentEmojis.map((emoji, idx) => (
          <TouchableOpacity key={idx} onPress={() => onEmojiPress(emoji)}>
            <Text style={styles.emoji}>{emoji}</Text>
          </TouchableOpacity>
        ))}
      </View>
      {/* 所有表情 */}
      <Text style={styles.emojiCategory}>所有表情</Text>
      <ScrollView style={{ maxHeight: adapt(224) }} keyboardShouldPersistTaps="handled">
        {emojiRows.map((row, rowIndex) => (
          <View style={styles.emojiRowJustify} key={rowIndex}>
            {row.map((emoji, colIndex) => (
              <TouchableOpacity key={colIndex} onPress={() => onEmojiPress(emoji)}>
                <Text style={styles.emoji}>{emoji}</Text>
              </TouchableOpacity>
            ))}
          </View>
        ))}
      </ScrollView>
      {/* 关闭按钮 */}
      <TouchableOpacity style={styles.emojiClose} onPress={onClose}>
        <Text style={styles.emojiCloseText}>✕</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  emojiPanel: {
    backgroundColor: '#181818',
    borderTopLeftRadius: adapt(16),
    borderTopRightRadius: adapt(16),
    marginTop: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 8,
    paddingBottom: getBottomSafeHeight() + adapt(12),
    paddingTop: adapt(12),
    paddingHorizontal: adapt(12),
    minHeight: adapt(200),
    maxHeight: adapt(240),
  },
  emojiCategory: {
    color: '#aaa',
    fontSize: adaptFontSize(14),
    marginVertical: adapt(6),
    marginRight: adapt(8),
  },
  emojiRowJustify: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: adapt(6),
    flexWrap: 'wrap',
  },
  emoji: {
    fontSize: adaptFontSize(28),
    width: EMOJI_SIZE,
    height: EMOJI_SIZE,
    textAlign: 'center',
    textAlignVertical: 'center',
    includeFontPadding: false,
    paddingVertical: adapt(2),
  },
  emojiClose: {
    position: 'absolute',
    bottom: getBottomSafeHeight() + adapt(12),
    right: adapt(14),
    backgroundColor: '#222',
    borderRadius: adapt(16),
    padding: adapt(6),
  },
  emojiCloseText: {
    color: '#fff',
    fontSize: adaptFontSize(18),
  },
});

export default EmojiPanel;